<template>
  <div>
    <Row>
    <Card>
      <div class="top-tool-bar">
        &nbsp;&nbsp;&nbsp;&nbsp;机构名称&nbsp;&nbsp;
        <Input v-model="value2" style="width:200px" placeholder="请输入机构名称"></Input>
        &nbsp;&nbsp;&nbsp;&nbsp;机构编码&nbsp;&nbsp;
        <Input v-model="value2" style="width:200px" placeholder="请输入机构编码"></Input>
        &nbsp;&nbsp;&nbsp;&nbsp;状态&nbsp;&nbsp;
        <Select v-model="type" style="width:150px" placeholder="全部" >
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <Button type="primary" icon="ios-search" >搜索</Button>

      </div>
      <div class="distance">
        <Button type="success"  @click.prevent.stop="addModal()">新增</Button>

        <Button type="info" >编辑</Button>

        <Button type="error" >删除</Button>

        <Button  @click.prevent.stop="showAdd()">查看</Button>

        <Button >启用</Button>

        <Button  >停用</Button>
      </div>


      <Row>
        <i-col span="5">
          <Card class="my-22-text" style="background-color: #eee;margin-top: 10px;" dis-hover>机构关系</Card>

          <Tree :data="baseData" @on-select-change='open' ref="tree"></Tree>
        </i-col>
        <Col span="19">
        <Table border :columns="columns1" :data="data1"></Table>
        </Col>
      </Row>
      <Page :total="total"  show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>

      <Modal
              v-model="showAddOrderModal"
              title="新增机构"
              ok-text="保存"
              width="650"
              @on-ok="save">
        <Form :model="newOrganization" ref="newOrganization" label-position="right" :label-width="80"  >
          <Row>
            <Col span="12">
            <Form-item label="机构名称" prop="name">
              <Input v-model="newOrganization.name"></Input>
            </Form-item>
            </Col>
            <Col span="12">
            <Form-item label="上级机构" prop="parent">
              <Row>
                <Col span="20">
                <Input v-model="newOrganization.parent" readonly></Input>
                </Col>
                <Col span="4">
                <Button @click.prevent.stop="showList()">...</Button>
                </Col>
              </Row>
            </Form-item>
            </Col>
          </Row>
          <Row>
            <Col span="12">
            <Form-item label="机构简称" prop="alias">
              <Input v-model="newOrganization.alias"></Input>
            </Form-item>
            </Col>
            <Col span="12">
            <Form-item label="机构编码" prop="code">
              <Input v-model="newOrganization.code"></Input>
            </Form-item>
            </Col>
          </Row>
          <Row>
            <Col span="12">
            <Form-item label="关联名称" prop="relateName">
              <Row>
                <Col span="20">
                <Input v-model="newOrganization.relateName" readonly></Input>
                </Col>
                <Col span="4">
                <Button @click.prevent.stop="showRelate()">...</Button>
                </Col>
              </Row>
            </Form-item>
            </Col>
            <Col span="12">
            <Form-item label="机构类型" prop="type">
              <Select v-model="type" >
                <Option v-for="item in organizationType" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Form-item>
            </Col>
          </Row>
          <Row>
            <Col span="12">
            <Form-item label="排序" prop="sort">
              <Input v-model="newOrganization.sort"></Input>
            </Form-item>
            </Col>
            <Col span="12">
            <Form-item label="备注" prop="remark">
              <Input v-model="newOrganization.remark"></Input>
            </Form-item>
            </Col>
          </Row>
        </Form>
      </Modal>
      <Modal
              v-model="showModal"
              title="机构列表"
              width="550">
        <div slot="footer">
          <Button @click="closeModel()">关闭</Button>
        </div>
        <Tree :data="baseData" @on-select-change='setParent' ref="tree"></Tree>
      </Modal>
      <Modal
              v-model="showRelateModal"
              title="关系列表"
              ok-text="确定"
              width="550">
        <div slot="footer">
          <Button  @click="closeModel()">关闭</Button>
        </div>
        <Tree :data="baseData" @on-select-change='setRelate' ref="tree"></Tree>
      </Modal>
    </Card>
    </Row>

  </div>
</template>
<style scoped>

</style>
<script type="text/ecmascript-6">
  //import api from '@/fetch/api';
  export default {
    beforeMount () {

    },
    mounted() {
      this.getTree();
    },
    data () {
      return {
        newOrganization:{
          name:'',
          alias:'',
          code:'',
          sort:'',
          remark:'',
          parent:'',
          relateName:'',
        },
        showAddOrderModal:false,
        showModal:false,
        showRelateModal:false,
        columns1: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '机构名称',
            key: 'name'
          },
          {
            title: '上级机构',
            key: 'name2'
          },
          {
            title: '机构编码',
            key: 'code'
          },
          {
            title: '机构简称',
            key: 'alias'
          },
          {
            title: '机构类型',
            key: 'type'
          },
          {
            title: '关联名称',
            key: 'relateName'
          }
        ],
        data1: [],
        baseData: [],
        value2: '',
        loading:false,
        showTip:false,
        list: {},
        cityList: [
          {
            value: 'all',
            label: '全部'
          },
          {
            value: 'start',
            label: '启用'
          },
          {
            value: 'forbidden',
            label: '停用'
          }
        ],
        organizationType: [
          {
            value: '0',
            label: 'qq'
          },
          {
            value: '1',
            label: 'ww'
          },
          {
            value: '2',
            label: 'ee'
          }
        ],
        type: '',
        size: 10,
        num: 1,
        total: 0,
        selectedTree: [],
        selectedId: '',
        parentId: '',
        relateId:'',
      }
    },
    methods: {
      addModal() {
        this.showAddOrderModal = true;
      },
      //弹出上级机构树
      showList(){
        this.showModal = true;
        this.parentId = this.baseData[0].id;
        this.newOrganization.parent = this.baseData[0].title;
      },
      //选中上级机构时，赋title
      setParent(selectedData){
        this.parentId = selectedData[0].id;
        this.newOrganization.parent = selectedData[0].title;
      },
      //弹出关系树
      showRelate(){
        this.showRelateModal = true;
        this.relateId = this.baseData[0].id;
        this.newOrganization.relateName = this.baseData[0].title;
      },
      //选中关系名时，赋title
      setRelate(selectedData){
        this.relateId = selectedData[0].id;
        this.newOrganization.relateName = selectedData[0].title;
      },
      save() {
        let params = {
          name:this.newOrganization.name,
          pid: this.parentId,
          code:this.newOrganization.code,
          alias:this.newOrganization.alias,
          type:this.type,
          relateId:this.relateId,
          sort:this.newOrganization.sort,
          remark:this.newOrganization.remark,
        };
        api.fetchPost(api.path.organazitonSave, params).then((data) => {
          //控制加载条
          console.log(data);
          if (data.code == 10000) {
            this.$emit('hideLoading');
            this.getTree();
            this.$refs['newOrganization'].resetFields();
          } else {
            this.$Message.error(data.msg);
          }
        }).catch(err => {
          this.$emit('hideLoading');
          this.$Message.error(err);
        })
      },

      cancelAddOrderModal(){
        this.showAddOrderModal = false;
      },
      getTree() {
        api.fetchPost(api.path.organazitonTree, {}).then((data) => {
          //控制加载条
//          console.log(data);
          if (data.code == 10000) {
            this.$emit('hideLoading');
            this.loading = false;
            this.baseData = data.data;
            this.selectedTree = this.baseData;
            this.baseData[0].selected = true;
            this.getList(this.baseData[0].id, this.size, this.num);
            this.selectedId = this.baseData[0].id;
          } else {
            this.$Message.error(data.msg);
          }
        }).catch(err => {
          this.$emit('hideLoading');
          this.$Message.error(err);
        })
      },
      open(treeData) {
        this.selectedId = treeData[0].id;
        this.selectedTree = treeData;
        this.getList(this.selectedId, this.size, this.num);

      },
      getList(id,size, num) {
        let params = {
          pid: id,
          pageSize: size,
          pageStart: num
        };
        api.fetchPost(api.path.organazitonList, params).then((data) => {
          //控制加载条
//          console.log(data);
          if (data.code == 10000) {
            this.$emit('hideLoading');
            this.loading = false;
            this.total = data.data.total;
            this.data1 = data.data.data;
          } else {
            this.$Message.error(data.msg);
          }
        }).catch(err => {
          this.$emit('hideLoading');
          this.$Message.error(err);
        })
      },
      changePage(num) {
        this.getList(this.selectedId, this.size, num)
      },
      changeSize(size) {
        this.size = size;
        this.getList(this.selectedId, size, this.num)
      },
      closeModel(){
        this.showModal = false;
        this.showRelateModal = false;
      },

    }

  };
</script>
